
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章详情页</title>
    <link rel="short icon" href="/assets/images/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="/layout/css/bootstrap.min.css">
    <link rel="stylesheet" href="/layout/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/layout/layout.css">
    <script src="/layout/js/jquery.js"></script>
    <script src="/layout/js/bootstrap.min.js"></script>
    <script src="/layout/js/holder.js"></script>
    <style>
        .write-list{display: none;border: 1px solid #ddd;padding: 0px;}
        .write-list span{height: 50px;font-size: 20px;line-height: 50px;}
        .write-list span:hover{background: #ddd;cursor: pointer;}
    </style>
</head>
<body>
<div class="container-fluid" style="height: 60px; border-bottom: 1px solid #ddd;position: absolute;top: 0px;width: 100%;z-index: 2;">
    <div class="col-md-1">
        <a href="/"><img data-src="holder.js/40x40?text=知" alt="" style="margin-top: 10px;"></a>
    </div>
    <div class="col-md-6 col-md-offset-2">
        <div class="col-md-1">
            <!-- 栏目图片 -->
            <a href="/column/{{$article->column->id}}"><img width="50" style="border-radius: 50%;margin-top: 5px;" src="{{$article->column->logo}}" alt=""></a>
        </div>
        <div class="col-md-2" style="line-height: 20px; margin-top: 10px;">
            首发于<br><b>{{$article->column->title}}</b>
        </div>
        <div class="col-md-4">
            <div style="height: 38px;width:78px;border: 1px solid #50c87e;color: #50c87e;font-size: 14px;margin-top: 10px;padding: 9px;border-radius: 5px;cursor: pointer;">关注栏目</div>
        </div>
    </div>
    <div class="col-md-2 col-md-offset-1" style="line-height: 60px;font-size: 25px;color: #ccc;">
        <span class="glyphicon glyphicon-pencil" style="font-size: 20px;"></span>
        <a href="/write" style="text-decoration: none;color: #999;">写文章</a>
    </div>
</div>
<div class="container-fluid" style="position: relative;padding: 0px;">
    <div class="col-md-12" style="height: 60px;"></div>
    <div class="col-md-12"><center><img src="{{$article->images}}" alt=""></center></div>
    <div class="col-md-6 col-md-offset-3" style="">
        <!-- 文章标题 -->
        <h1><b>{{$article->title}}</b></h1>
        <!-- 作者相关 文章相关 -->
        <div class="col-md-12" style="height: 36px;line-height: 36px;">
            <div class="col-md-1">
                <!-- 用户头像 -->
                <img width="100%" src="{{$article->user->face}}" alt="" style="border-radius: 50%;">
            </div>
            <div class="col-md-3">
                <!-- 用户名称 -->
                <span>{{$article->user->name}}</span> <span style="color: #9acfea;">✔</span>
            </div>
            <div class="col-md-8">
                <!-- 发表时间 -->
                <span>发表时间: {{$article->created_at}}</span>
            </div>
        </div>
        <div class="col-md-12" style="height: 40px;"></div>
        <!-- 文章详情 -->
        <div class="col-md-12" style="line-height: 30px;">
            <p>{!! $article->content !!}
        </div>
        <!-- 文章详情结束 -->
        <div class="col-md-12" style="height: 40px;"></div>
        <!-- 文章话题标签 -->
        <div class="col-md-12">
            @foreach($article->topicArticle as $k=>$v)
            <span class="btn">{{$v->topic->title}}</span>
            @endforeach
        </div>
        <!-- 话题标签结束 -->
        <!-- 文章底部 -->
        <div class="col-md-12" style="margin-top: 10px;height: 38px;line-height: 38px;">
            <div class="col-md-6">
                <!-- 点赞数 -->
					<span style="border: 1px solid #50c87e;color: #50c87e;padding: 10px 15px;border-radius: 5px;">
						<span class="glyphicon glyphicon-thumbs-up"></span>
						{{$article->concern}}
					</span>
            </div>
            <div class="col-md-6 text-right">
                <span class="glyphicon glyphicon-share"></span><span>分享</span>
                <span class="glyphicon glyphicon-earphone"></span><span>举报</span>
            </div>
        </div>
        <!-- 文章底部结束 -->
        <!-- 评论区 -->
        <!-- <div class="clearfix" style="height: 20px;"></div> -->
        <div class="col-md-12" style="height: auto;line-height: 25px;">
            <div class="col-md-2"><b>{{$article->discuss}}条评论</b></div>
            <div class="col-md-10"><hr></div>
            <!-- 已登录用户发表评论输入框 -->
            <div class="col-md-12">
                <form id="question_form">
                    <div class="col-md-1"><img width="36" src="{{$article->user->face}}" alt="" style="border-radius: 50%;"></div>
                    <div class="col-md-11">
                        <div class="input-group input-group-lg col-md-12">
                            <input type="hidden" name="article_id" value="{{$article->id}}">
                            <input type="text" name="content" class="form-control" placeholder="写下你的评论" aria-describedby="sizing-addon1" style="border-radius: 5px;">
                        </div>
                    </div>
                    <div class="col-md-12 text-right" style="margin-top: 10px;">
                        <span class="btn">取消</span>
                        <span id="question_btn" class="btn btn-primary">评论</span>
                    </div>
                </form>
                <script>
                    $('#question_btn').click(function() {
                        var data = {
                            content : $('#question_form input[name=content]').val(),
                            article_id : $('#question_form input[name=article_id]').val()
                        };
                        $.post('/api/discuss', data, function(res){
                            if(!res.id) return false;
                            var discuss = $('#discuss_bak').clone(true);
                            var discuss_datail = '';
                            discuss_datail += '<div class="col-md-1"><img width="40" src="'+res.face+'" alt="" style="border-radius: 50%;"></div>';
                            discuss_datail += '<div class="col-md-11"><h4><b>'+res.name+'</b></h4>';
                            discuss_datail += '<p>'+res.content+'</p><h5><span>'+res.created_at+'</span>';
                            discuss_datail += '<span><span class="glyphicon glyphicon-log-in"></span> <a href="#">回复</a></span> <span><span class="glyphicon glyphicon-thumbs-up"></span> <a href="#">赞</a></span> <span><span class="glyphicon glyphicon-earphone"></span> <a href="#">举报</a></span>'
                            discuss_datail += '</h5></div>';
                            discuss.html(discuss_datail);
                            discuss.slideDown();
                            $('#discuss_list').prepend(discuss);
                        }, 'json');
                    });
                </script>
            </div>
            <!-- 评论列表 -->
            <div id="discuss_list">
                @foreach($article->discusses as $k=>$v)
                <div class="col-md-12">
                    <div class="col-md-1"><img width="40" src="{{$v->user->face}}" alt="" style="border-radius: 50%;"></div>
                    <div class="col-md-11">
                        <h4><b>{{$v->user->name}}</b></h4>
                        <p>{{$v->content}}</p>
                        <h5>
                            <span>{{$v->created_at}}</span>
                            <span><span class="glyphicon glyphicon-log-in"></span> <a href="#">回复</a></span>
                            <span><span class="glyphicon glyphicon-thumbs-up"></span> <a href="#">赞</a></span>
                            <span><span class="glyphicon glyphicon-earphone"></span> <a href="#">举报</a></span>
                        </h5>
                    </div>
                </div>
                @endforeach
            </div>
            <!-- 单条评论 -->
            <div id="discuss_bak" class="col-md-12" style="display: none;"> </div>
        </div>
        <div class="clearfix"></div>
        <!-- 评论区结束 -->
    </div>
    <!-- 推荐区 -->

    <!-- 推荐区结束 -->
</div>
</body>
</html>